<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--手机端默认的css样式处理-->
    <link rel="stylesheet" href="./css/normalize.css">

    <!--首页轮播图需要的css样式-->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">


    <!--移动端开发技术方案：rem+媒体查询+弹性盒子布局+swiper+less -->

    <!--引用自己的样式-->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <header class="myheader">
        <a href="login.html" class="mylogin">登录</a>
        <span>发现课程 </span>
        <span></span>
    </header>

    <!-- 轮播图+导航按钮菜单-->
    <div class="mynav">
        <!--轮播图-->
        <div class="myswiper">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/图层 3@2x.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/nature-2.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/nature-3.jpg" />
                    </div>
                </div>
            </div>
        </div>

        <!--导航菜单区域-->
        <div class="menus">
            <a>
                <img src="./images/矩形 3@2x.png" />
                <span>文学艺术</span>
            </a>
            <a>
                <img src="./images/椭圆 5 副本@2x.png" />
                <span>哲学历史</span>
            </a>
            <a>
                <img src="./images/组 3@2x.png" />
                <span>经管法学</span>
            </a>
            <a>
                <img src="./images/椭圆 7@2x.png" />
                <span>基础科学</span>
            </a>
            <a>
                <img src="./images/组 1@2x.png" />
                <span>工程技术</span>
            </a>
            <a>
                <img src="./images/组 2@2x.png" />
                <span>农林医学</span>
            </a>
        </div>


    </div>

    <!--热门课程-->
    <div class="hot">
        <h4>热门课程</h4>

        <div class="img-box">
            <img src="images/图层 3@2x.png" />
        </div>
    </div>
    <!--热门课程-->
    <div class="hot">
        <h4>热门课程</h4>

        <div class="img-box">
            <img src="images/图层 3@2x.png" />
        </div>
    </div>



    <!--底部-->
    <div class="myfooter">
        <a>发现课程</a>
        <a>我的学习</a>
    </div>





    <!-- 手机淘宝团队开发的屏幕自适应插件文件-->
    <script src="js/flexible.js"></script>

    <!--轮播图的js-->
    <script src="js/swiper-bundle.min.js"></script>

    <script>
        var swiper = new Swiper(".mySwiper", {
            autoplay: true,//自动动播放


            pagination: true,//下面的笑点
            // navigation: true,
            // scrollbar: true,  黑色线
            createElements: true,//创建元素
        });
    </script>
</body>

</html>